<template>
	<view class="main">
		<view class="allbgtop">
			<view class="allbgtop-left">
			</view>
			<view class="allbgtop-right">
			</view>
		</view>
		<view class="indextop">
			<view class="indexsearch">
				<view class="indexhezi">
					<view class="indexicon">
						<view class="indexiconn">
							<image src="@/static/icon/search.png" mode=""></image>
						</view>
					</view>
					<input type="text" v-model="keyword" id="indexbtn" placeholder="请输入要搜索的内容关键词">
					<view class="indexsearchbtn" @tap="search">
						搜索
					</view>
				</view>
			</view>
		</view>
		<view class="searchmain">
			<view class="xia">
				以下是相关内容
			</view>
			<view class="box" v-for="(v,k) in keywordList" :key="k" @click="goDetail(v)">

				<view class="right">
					<view class="title">
						{{v.name}}
					</view>
					<view class="content">
						{{v.intro}}
					</view>
				</view>
			</view>
		</view>
		<view class="gotop" v-if=" height>=1000">
			<view class="gotopimg">
				<u-icon name="arrow-upward" size="60" class="arrow-upward" @click='gotop'></u-icon>
			</view>
		</view>
		<MyPopup v-if="show" :content='content' @showshow='showshow'></MyPopup>

	</view>
</template>

<script>
	import
	MyPopup
	from "@/components/Popup.vue"
	import {
		Books
	} from "@/request/api.js"
	export default {
		data() {
			return {
				keyword: '',
				keywordList: [],
				page: 1,
				page_size: 10,
				totalPage: 0,
				itotalPage: 0,
				search_keyword_id: '',
				show: false,
				content: '请输入内容',
				height: '',
			};
		},
		onLoad(option) {
			let keywordList = JSON.parse(decodeURIComponent(option.keywordList ? option.keywordList : '[]'))
			this.keyword = option.keyword
			this.search_keyword_id = keywordList.page_info.search_keyword_id
			this.keywordList = keywordList.data
			this.itotalPage = keywordList.page_info.total
		},
		methods: {
			async search() {
				this.page = 1
				if (this.keyword.trim() == '') {
					this.content = '请输入内容'
					this.show = true
					this.keyword = ''
					return
				}
				let res = await Books.Search(this.keyword, this.page)
				if (res.data.page_info.total == 0) {
					this.content = '暂无相关书籍，换个关键词试试'
					this.show = true
					this.keyword = ''
					return
				}
				if (res.data.page_info.total != 0) {
					let kldata = res.data
					console.log(kldata);
					if (res.data.page_info.search_keyword_id != 0) {
						uni.navigateTo({
							url: `/pages/Detail/Detail?id=${kldata.data[0].id}&search_keyword_id=${kldata.page_info.search_keyword_id}&chapter_id=${kldata.data[0].chapter_id}`
						})
						this.keyword = ''
					} else {
						this.totalPage = kldata.page_info.total
						this.keywordList = kldata.data
						this.search_keyword_id = kldata.page_info.search_keyword_id
						this.itotalPage = 0
					}

				}
			},
			showshow(v) {
				this.show = v
			},
			goDetail(v) {
				uni.navigateTo({
					url: `/pages/Introduction/Introduction?id=${v.id}&search_keyword_id=${this.search_keyword_id}`
				})
			},
			gotop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this.page = 1
			},
		},
		onPageScroll(e) {
			this.height = e.scrollTop
		},
		// 滑倒底部加载更多
		async onReachBottom() {
			if (this.itotalPage != 0) {
				let newitotalPage = Math.ceil(this.itotalPage / this.page_size)
				this.page++
				if (this.page > newitotalPage) return
				let res = await Books.Search(this.keyword, this.page)
				let pageList = res.data.data
				this.keywordList = this.keywordList.concat(pageList)
			} else if (this.totalPage != 0) {
				let newtotalPage = Math.ceil(this.totalPage / this.page_size)
				this.page++
				if (this.page > newtotalPage) return
				let res = await Books.Search(this.keyword, this.page)
				let pageList = res.data.data
				this.keywordList = this.keywordList.concat(pageList)
			}
		},
		// 注册组件
		components: {
			MyPopup
		}
	}
</script>

<style lang="less" scoped>
	@import url("./SearchList.less");
</style>